<template>
  <div>
    <ZZDialog class="myself" title="图上标绘" @close="onClose()">
      <ul class="toolbar">
        <li id="btn_plot_openfile"><i class="fa fa-folder-open-o" title="打开文件"></i></li>
        <li id="btn_plot_openfile2"><i class="fa fa-folder-open" title="叠加文件"></i></li>
        <li id="btn_plot_savefile"><i class="fa fa-save" title="保存文件"></i></li>
        <li id="btn_plot_delall"><i class="fa fa-trash" title="清空标绘"></i></li>
        <li id="btn_plot_isedit"><i class="fa fa-unlock" title="是否可编辑"></i></li>
      </ul>

      <el-tabs class="demo-tabs">
        <el-tab-pane label="绘制">
          <el-select v-model="value" class="type-select" @change="onChangeSlelct()">
            <el-option v-for="item in plotOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <ul class="plotlist">
            <li v-for="(item, key) in CurrentItems" :key="key">
              <i>
                <img v-if="item.type != 'font-point'" :src="item.image" :title="item.name" @click="onClickItem(item)"
                  iconClass="fa fa-flag" class="li-item" />
                <i v-if="item.type == 'font-point'" :title="item.name" :class="item.style.iconClass"
                  style="color: #fafa00"></i>
              </i>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="列表">
          <el-table :data="entityListRef">
            <el-table-column prop="type" label="类型" width="90" />
            <el-table-column prop="name" label="名称" width="60" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button-group>
                  <el-button link type="primary" size="small" @click.prevent="onEditEntity(scope.$index)">
                    编辑
                  </el-button>
                  <el-button link type="primary" size="small" @click.prevent="onDeleteEntity(scope.$index)">
                    删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </ZZDialog>
    <PlotAttr class="attrdiv" v-if="showAttr" @close="showAttr=!showAttr"></PlotAttr>
  </div>
</template>

<script>
import ZZDialog from '../common/ZZDialog.vue';
import { plotItems, plotOptions } from './plotData/plotItem';
import PlotAttr from './PlotAttr.vue'

export default {
  components: {
    ZZDialog,
    PlotAttr
  },
  data() {
    return {
      value: '二维平面类',
      entityListRef: [],
      CurrentItems: plotItems.二维平面类,
      plotOptions: plotOptions,
      showAttr: false,
    }
  },
  beforeMount() {
    this.viewer = this.$store.state.viewer
  },
  mounted() {
    if (!this.viewer) return;
    this.initDrawControl();
    window.drawControl.hasEdit(true);
    this.updateEntityList();
  },
  methods: {
    onClickItem(it) {
      this.initDrawControl();
      window.drawControl.hasEdit(true);
      let defStyle = zz3d.draw.util.getDefStyle(it.style);
      let item = Object.assign({ attr: { id: "", name: "", remark: "" } }, defStyle, it);
      // this.showAttr = false
      window.drawControl.startDraw(item);
    },
    onChangeSlelct() {
      let cur = this.value;
      this.CurrentItems = plotItems[cur];
    },
    onDeleteEntity(index) {
      let entity = window.drawControl.getEntitys()[index];
      window.drawControl.deleteEntity(entity);
      this.updateEntityList();
    },
    onEditEntity(index) {
      var entity = window.drawControl.getEntitys(true)[index];
      if (entity == null) return;
      this.viewer.zz.flyTo(entity);
      window.drawControl.startEditing(entity);
    },
    startEdit(entity) {
      let lonlats = window.drawControl.getCoordinates(entity);
      let opt = {
        entity: entity,
        lonlats: lonlats
      };
      window.drawEntitys = opt
      this.showAttr = true
    },
    updateEntityList() {
      this.entityListRef.length = 0;
      if (!window.drawControl) {
        return;
      }
      let tempData = window.drawControl.toGeoJSON();
      if (!tempData || !tempData.features) {
        return;
      }
      for (let i = 0; i < tempData.features.length; ++i) {
        let feature = tempData.features[i];
        let name;
        let type;
        if (feature.properties) {
          name = (feature.properties.attr && feature.properties.attr.name) || feature.properties.name || '未命名';
          type = feature.properties.type;
        }
        this.entityListRef.push({ index: i, name: name, type: type });
      }
    },
    initDrawControl() {
      let drawControl = new zz3d.Draw(this.viewer, {
        hasEdit: false,
        nameTooltip: true
      });
      window.drawControl = drawControl
      let editCallback = (e) => {
        this.startEdit(e.entity);
      };

      //事件监听
      window.drawControl.on(zz3d.draw.event.DrawCreated, editCallback);
      window.drawControl.on(zz3d.draw.event.EditStart, editCallback);
      window.drawControl.on(zz3d.draw.event.EditMovePoint, editCallback);
      window.drawControl.on(zz3d.draw.event.EditRemovePoint, editCallback);
      window.drawControl.on(zz3d.draw.event.EditStop, () => {

        this.showAttr =false
        this.updateEntityList();
      });

      window.drawControl.on(zz3d.draw.event.Delete, () => {
        this.updateEntityList();
      });

      let plotLayer = {
        pid: -1,
        name: 'plot-layer',
        visible: true,
        type: 'base',
        onAdd: () => {
          //显示回调 
          window.drawControl.setVisible(true);
        },
        onRemove: () => {
          //隐藏回调
          window.drawControl.setVisible(false);
        },
        onCenterAt: (duration) => {
          //定位回调
          var arr = window.drawControl.getEntitys();
          this.viewer.flyTo(arr, {
            duration: duration
          });
        },
        compare: {
          //"分屏对比" 中使用, 会覆盖上面方法
          onCreate: function () {
            // viewerEx为分屏中另外一个屏的地球回调 ，add时不能讲当前viewer的对象直接添加到viewerEx，需要新构造
            // drawControlEx = new zz3d.Draw(viewerEx, { hasEdit: false, nameTooltip: true })
          },
          onAdd: function () {
            //显示回调
            // viewerEx为分屏中另外一个屏的地球回调
            // drawControlEx.loadJson(that.getGeoJson()); //新构造数据，不能直接add到新viewerEx
            // drawControlEx.setVisible(true);
          },
          onRemove: function () {
            //隐藏回调
            // drawControlEx.setVisible(false);
          }
        }
      };

      zz3d.layer.createLayer(plotLayer, this.viewer);
      this.viewer.zz.addOperationalLayer(plotLayer);
    },
    onClose() {
      window.drawControl.stopDraw();
      window.drawControl.hasEdit(false);
      this.$emit('close')
    },
    saveDraw(drawControl) {
      let draw = Object.preventExtensions(drawControl);
      this.$store.commit('setDrawControl', draw)
    }
  }
}
</script>

<style scoped>
.myself {
  position: absolute;
  left: calc(100% - 250px);
  top: 50px;
  min-width: 100px;
  height: 800px;
  width: 236px;
}

.li-item {
  width: 50px;
  height: 50px;
  margin: 4px 8px 4px 0px;
}

.li-item:hover {
  border: 1px solid rgb(32, 160, 255);
}

.plotlist {
  display: flex;
  width: 236px;
  padding: 2px 4px 2px 0px;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 4px;
}

.plotlist i {
  width: 50px;
  height: 50px;
  margin: 0px;
}

.type-select {
  padding: 0px 4px 0px 0px;
  width: 100%;
}

.demo-tabs {
  padding-left: 4px;
}

.attrdiv {
  position: absolute;
  left: 10px;
  top: 420px;
  min-width: 100px;
  width: 230px;
  height: 400px;
}
</style>

<style scoped src="./toolbar.css"></style>
